<script setup lang="ts">
import LeftTop from '../../components/Operation/LeftTop.vue'
import LeftBottom from '../../components/Operation/LeftBottom.vue'
import LeftMain from '../../components/Operation/LeftMain.vue'
import RightTop from '../../components/Operation/RightTop.vue'
import RightBottom from '../../components/Operation/RightBottom.vue'
import MainEcharts from '../../components/Security/MainEcharts.vue'
import autofit from 'autofit.js'
import { onMounted } from 'vue';
onMounted(() => {
    //页面自适应
    autofit.init({
        dh: 1080,
        dw: 1920,
        el: "body",
        resize: true
    })
})
</script>

<template>
    <AutoFit id="container" className="container" designWidth="1920" designHeight="1080">
        <div class="center">
            <div class="left">
                <LeftTop />
                <LeftMain />
                <LeftBottom />
            </div>
            <div class="center-main">
                <MainEcharts />
            </div>
            <div class="right">
                <RightTop />
                <RightBottom />
            </div>
        </div>
    </AutoFit>
</template>

<style scoped lang="scss">
.center {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    top: 0;

    &-main {
        width: 34%;
        position: relative;
    }
}



.left {
    width: 33%;
    height: 100%;
    background-image: url('../../assets/images/Left.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 100;
}

.right {
    width: 33%;
    height: 100%;
    background-image: url('../../assets/images/Right.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 100;
}
</style>